<template>
  <div class="content">
    <alertTip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alertTip>
    <div class="con">
      <div class="top">
        <div class="goods-top">
          <div class="img">
            <img :src="pinDanGoodsInfo.detailsImg" alt="">
          </div>
          <div class="text">
            <p>{{pinDanGoodsInfo.mallName}}</p>
            <p>已选择:{{pinDanGoodsInfo.specificationsName}}</p>
            <p>&yen{{pinDanGoodsInfo.salePrice/100}}</p>
          </div>
        </div>
        <div class="num">
          <p>数量</p>
          <div class="numbers">
            <img class="sub" src="./_@1x.png" alt="" v-on:click="sub">
            <div class="number" v-model="isNum">{{isNum}}</div>
            <img class="add" src="./+@1x.png" alt="" v-on:click="add">
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>
          <span>佣金比例</span>
          <b>{{pinDanGoodsInfo.commissionRatio}}%</b>
        </div>
        <div>
          <span>拼单时间</span>
          <b>24小时</b>
        </div>
        <div>
          <span>拼单人数</span>
          <span>{{pinDanGoodsInfo.mergeOrderNumber}}人<img src="./ico@1x.png" alt=""></span>
        </div>
        <div>
          <span>拼单件数</span>
          <span>{{isNum}}件<img src="./ico@1x.png" alt=""></span>
        </div>
      </div>
    </div>
    <footer>
      <div class="foot">
        <div>获得佣金：{{pinDanGoodsInfo.salePrice/100 * isNum*pinDanGoodsInfo.commissionRatio/100 || 0}}</div>
        <div @click="fn10008">发起拼单</div>
      </div>

    </footer>
  </div>

</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  export default {
    name: '',
    data() {
      return {
        isNum: 1,
        GPId: 0,
        numPerson: 0,
        pinDanGoodsInfo:{},
        showAlert:false,
        alertText:null
      }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      sub: function () {
        this.isNum--;
        if (this.isNum <= this.pinDanGoodsInfo.mergeOrderNumber) {
          this.alertTip("数值不可以小于"+this.pinDanGoodsInfo.mergeOrderNumber);
          this.go = function(){
             this.showAlert = false;
          }
          // alert("数值不可以小于"+this.pinDanGoodsInfo.mergeOrderNumber)
          this.isNum =this.pinDanGoodsInfo.mergeOrderNumber ;
        }
      },
      add: function () {
        this.isNum++;
        if (this.isNum >= this.pinDanGoodsInfo.mallCount) {
          this.alertTip("数值不可以大于"+this.pinDanGoodsInfo.mallCount);
          this.go = function(){
             this.showAlert = false;
          }
          // alert("数值不可以大于"+this.pinDanGoodsInfo.mallCount)
          this.isNum =this.pinDanGoodsInfo.mallCount ;
        }

      },
      //发起订单
      fn10008() {
        let jsonValue = JSON.stringify({
          "c": "10008",
          "p": {
            "tokenId": token(),
            "userId": this.pinDanGoodsInfo.userId,               // 帐号
            "apId":this.pinDanGoodsInfo.apId,                    //采购id
            "mallId": this.pinDanGoodsInfo.mallId,               // 商品ID
            "msId" : this.pinDanGoodsInfo.msId,                  // 商品规格id
            "goodsNum":this.isNum,                               // 商品数量
            "personNum":this.pinDanGoodsInfo.mergeOrderNumber    // 参与人数

          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          this.$router.push("./Shops")
        })
      },
      //商品详情
    },
    created() {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }
        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      let pinDanInfo = this.$route.params
      console.log(pinDanInfo)
      this.pinDanGoodsInfo = JSON.parse(localStorage.getItem('pinDanGoodsInfo'))
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .con {
      background: #FFFFFF;
      .top {
        .goods-top {
          box-sizing: border-box;
          height: 224px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          padding: 33px 30px 0px 30px;
          .img {
            width: 146px;
            height: 146px;
            background: #009dda;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            flex: 1;
            padding-left: 20px;
            font-size: 28px;
            p:nth-child(1) {
              color: #3b3b43;
              line-height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            p:nth-child(2) {
              font-size: 24px;
              color: #a1a1a1;
              padding: 10px 0 14px;
            }
            p:nth-child(3) {
              color: #fd4c2e;
            }
          }
        }
        .num {
          height: 110px;
          border-top: 1px solid #f4f4f4;
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          padding-left: 34px;
          padding-right: 19px;
          p {
            font-size: 28px;
            color: #3b3b43;
            line-height: 112px;
          }
          .numbers {
            margin-top: 25px;
            display: flex;
            line-height: 112px;
            flex-flow: row nowrap;
            justify-content: flex-start;
            img {
              width: 68px;
              height: 60px;
            }
            .number {
              width: 160px;
              height: 60px;
              font-size: 20px;
              background: url("./btn@1x.png") no-repeat;
              background-size: 100% 100%;
              text-align: center;
              line-height: 62px;
            }
          }
        }
      }
      .bottom {
        div {
          height: 92px;
          line-height: 92px;
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          padding-left: 32px;
          padding-right: 30px;
          span {
            font-size: 28px;
            color: #3b3b43;
          }
          b {
            font-weight: 400;
            font-size: 28px;
            color: #a1a1a1;
          }
          img {
            height: 22px;
            width: 14px;
            padding-left: 12px;
          }
        }
      }
    }

    footer {
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 28px;
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      .foot {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        height: 100px;
        div:nth-child(1) {
          flex: 1.5;
          color: #fd4c2e;
        }
        div:nth-child(2) {
          flex: 1;
          width: 288px;
          color: #ffffff;
          background: url("./btn_fqpd@1x.png") no-repeat;
          background-size: 100% 100%;
        }
      }

    }
  }
</style>
